<template>
  <view class="">
	  <view class="topTab">
	  	<view class="topTabstatus_bar" ></view>
	    <image
	      class="topIng"
	      src="/static/icons/concat_91.png"
	      mode="widthFix"
	    ></image>
	  </view>
	  
	<!-- 页面开始 -->
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
	<view class="" style="height: 91rpx;"></view>
    
	
    
    <view
      class="singFriend"
	  :class="index == 0?'singFriendOne':''"
      v-for="(item, index) in list1"
      :key="index"
      @click="linkFun(index)"
    >
      <view class="leftBox">
        <image class="headImg" :src="item.img" mode=""></image>
      </view>
      <view class="rightName">{{ item.title }}</view>
    </view>
    <view class="fengeViewImg">
      <image
        class="imhd"
        src="/static/icons/concat_62.png"
        mode="widthFix"
      ></image>
    </view>
    <view class="singFriend">
      <view class="leftBox">
        <image
          class="headImg"
          src="../../static/icons/76_07.png"
          mode=""
        ></image>
      </view>
      <view class="rightName">企业微信联系人</view>
    </view>

    <view class="" v-for="(item, index) in letterList" :key="index">
      <template v-if="friedObj[item]?.length">
        <view class="fengeView">{{ item }}</view>
        <view
          class="singFriend"
          v-for="(iteb, index2) in friedObj[item].sort()"
          :key="index2"
        >
          <view class="leftBox">
            <image
              class="headImg"
              :src="'../../static/headImg/' + imgFun() + '.jpg'"
              mode=""
            ></image>
          </view>
          <view class="rightName">{{ iteb }}</view>
        </view>
      </template>
    </view>
    <view class="totalFriends" v-if="friendsTotal && Object.keys(friedObj).length">
      {{ friendsTotal }}个朋友
    </view>

    <view class="rightFlexBox" v-if="letterList.length">
		<view class="status_heigth"></view>
		<view class="tobar_heigth"></view>
      <view class="sZiMu">
        <image
          style="width: 21rpx; height: 20rpx; object-fit: cover"
          src="/static/icons/jian2120.png"
          mode=""
        ></image>
      </view>
      <view class="sZiMu"
        ><image
          style="width: 21rpx; height: 16rpx; object-fit: cover"
          src="/static/icons/xing2116.png"
          mode=""
        ></image>
      </view>
      <view class="sZiMu" v-for="(item, index) in letterList" :key="index">{{
        item
      }}</view>
    </view>

  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { wechatNameList, friendsTotalOnce } from "../../static/data/contact-data.js";
import PinyinUtils from "../../utils/pinyin/pingyinUtils.js";
const list1 = ref([
  { img: "../../static/icons/76_01.png", title: "新的朋友" },
  { img: "../../static/icons/76_02.png", title: "仅聊天的朋友" },
  { img: "../../static/icons/76_03.png", title: "群聊" },
  { img: "../../static/icons/76_04.png", title: "标签" },
  { img: "../../static/icons/76_05.png", title: "公众号" },
  { img: "../../static/icons/76_06.png", title: "服务号" },
]);
const friedObj = ref({});
const letterList = ref([]);
const friendsTotal = friendsTotalOnce; //好友的总数
function imgFun() {
  return "sj" + getRandomInteger(1, 100);
}
function getRandomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function linkFun(index) {
  const that = this;
  if (index == 0) {
    uni.navigateTo({
      url: "/views/newFrieds",
    });
  } else if (index == 1) {
    uni.navigateTo({
      url: "/views/anquan",
    });
  } else if (index == 2) {
    // 群聊：生成30个随机朋友
    createFriendsFun();
  } else if (index == 3) {
    // 标签：一键删除生成的随机好友
    uni.showModal({
      title: "提示",
      content: "是否删除所有好友？",
      success: function (res) {
        if (res.confirm) {
          that.friedObj = {};
        } else if (res.cancel) {
          console.log("用户点击取消");
        }
      },
    });
  }
}
// 生成随机好友30个
function createFriendsFun() {
  const uniqueNumbers = generateUniqueRandomNumbers(
    0,
    wechatNameList.length - 1,
    friendsTotal
  ); //30表示个数
  let _obj = {};
  uniqueNumbers.map((v) => {
    let name = wechatNameList[v];
    let zim = PinyinUtils.chineseToPinYin(name);
    let reg = new RegExp("[A-Z]");
    if (!reg.test(zim)) {
      zim = "#";
    }
    if (!_obj[zim]) {
      _obj[zim] = [];
    }
    _obj[zim].push(name);
  });
  // let _list = [];
  // let last = "";

  // for (let key in _obj) {
  //   console.log(key);
  //   if (key == "#") {
  //     last = key;
  //   } else {
  //     if (!_list.includes(key)) _list.push(key);
  //   }
  // }
  // _list = _list.sort();
  // last && _list.push(last);
  // letterList.value = _list;
  friedObj.value = _obj;
}
function generateUniqueRandomNumbers(min, max, count) {
  const randomNumbers = new Set();
  while (randomNumbers.size < count) {
    const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    randomNumbers.add(randomNumber);
  }
  return Array.from(randomNumbers);
}

onMounted(() => {
	let alphabets = [];
	  for (let i = 65; i <= 90; i++) {
	    alphabets.push(String.fromCharCode(i));
	  }
	  letterList.value = alphabets.sort()
	  letterList.value.push('#')
  createFriendsFun();
});
</script>

<style scoped lang="scss">
page {
  background-color: #ededed;
}
.totalFriends {
  line-height: 102rpx;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  background-color: #fff;
  font-size: 30rpx;
}
.fengeViewImg {
  height: 62rpx;
  width: 100%;
  .imhd {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.topbtns {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 30rpx;
  .topBtnImg {
    height: 41rpx;
    width: 41rpx;
    object-fit: cover;
    margin-left: 35rpx;
  }
}
.rightFlexBox {
  width: 26rpx;
  height: 100%;
  position: fixed;
  right: 10rpx;
  top: 0;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .status_heigth{
	  height: var(--status-bar-height);
  }
  .tobar_heigth{
	  height: 91rpx;
  }
  .sZiMu {
    font-size: 20rpx;
    text-align: center;
    margin-bottom: 10rpx;
  }
}
.singFriend {
  background-color: #fff;
  padding-left: 30rpx;
  display: flex;
  align-items: center;
  .rightName {
    height: 102rpx;
    border-bottom: rgba(0, 0, 0, 0.05) solid 1rpx;
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 30rpx;
  }
  .leftBox {
    width: 76rpx;
    height: 76rpx;
    min-width: 76rpx;
    overflow: hidden;
    border-radius: 8rpx;
    .headImg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.singFriendOne:active{
	background-color: #d9d9d9;
}
.fengeView {
  height: 62rpx;
  font-size: 22rpx;
  line-height: 62rpx;
  padding-left: 30rpx;
  color: #545454;
  background-color: #ededed;
}
</style>
